<!--
 * @Author: Wangtao
 * @Date: 2022-06-20 15:34:19
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-06-22 17:01:22
-->
<template>
  <div class="batch-add">
    <div class="batch-add-label">
      <span class="title">{{ $t('public.batchAdd') + ':' }}</span
      >
      <span><span @click="distinguish" class="distinguish">{{
        discernstate ? $t('config.channel.distinguish1') : $t('config.channel.distinguish2')
      }}</span>
      <span @click="clear" class="distinguish">{{$t('public.clear')}}</span>
      </span>
    </div>
    <el-input
      size="mini"
      type="textarea"
      slot="reference"
      v-model="inputValue"
      @blur="filterValue"
      :placeholder="$t('public.agentBatchAddTip')"
    >
    </el-input>
    <div class="recognize-box" v-show="unmatchList.length > 0">
      <div class="recognize-title title">
        {{$t('config.channel.distinguish3')}}
      </div>
      <div class="recognize-result">
        <span v-for="item in unmatchList" :key="item">{{ item }}</span>
      </div>
    </div>
    <el-dialog :title="$t('config.channel.distinguish6')" :visible.sync="tipVisible" width="30%">
      <div class="tip-content">
         {{$t('config.channel.distinguish4')}}"{{ count }}"，{{$t('config.channel.distinguish5')}}"{{ failCount }}"
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="tipVisible = false"
          >{{$t('public.confirm')}}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'AgentBatchAdd',
  components: {},
  data () {
    return {
      inputValue: '',
      unmatchList: [],
      discernstate: false,
      failCount: 0, // 识别失败数
      count: 0, // 识别总数
      tipVisible: false
    }
  },
  props: {
    agents: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  watch: {},
  methods: {
    resetAgent1 () {
      this.resetAgent()
    },
    setunmatchList (unmatchList) {
      // 设置未匹配数组
      this.unmatchList = unmatchList
    },
    setBatchInfo ({ unmatchList }) {
      this.failCount = unmatchList.length
      this.setunmatchList(unmatchList)
      this.discernstate = false
      this.tipVisible = true
    },
    clear () {
      this.inputValue = ''
      this.unmatchList = []
    },
    distinguish () {
      console.log(this.inputValue)
      if (!this.inputValue) {
        this.$message.error(this.$t('config.channel.distinguish7'))
        return
      }
      let valueList = this.inputValue.split(',')
      if (valueList.length > 1000) {
        this.$message.error(this.$t('config.channel.distinguish8'))
        return
      }
      this.discernstate = true
      // 数据去重
      let uniqueList = Array.from(new Set(valueList)).filter((value) => {if (value) {return value}});
      this.count = uniqueList.length;
      this.$emit('change', uniqueList)
    },
    filterValue () {
      let filterValue = this.inputValue;
      filterValue = filterValue.replace(/\ +/g, ',');
      filterValue = filterValue.replace(/[\r\n]/g, ',');
      this.inputValue = filterValue
    }
  },
  beforeMount () { }
}
</script>
<style lang="stylus" scoped>
.tip-content
  text-align center
  font-size 14px
.batch-add
  padding: 0 15px 0
  box-sizing: border-box
  .title {
    margin-bottom: 5px
  }
.batch-add-label
  display flex
  justify-content space-between
  .distinguish
    cursor pointer
    color #459ae9
    margin-right: 8px
.recognize-box
  width: 100%
  margin-top: 8px    
.recognize-result
  display flex
  max-height 100px
  overflow-y scroll
  width 100%
  flex-wrap wrap
  padding: 5px 0 5px
  span
    background #ff6b6b
    color white
    padding 5px
    border-radius 5px
    margin-right 3px
    margin-bottom 3px
</style>
